<template>
  <div  class="container">
    <h2>输入需要查重的作业：</h2>
    <textarea  class="inputBox"  v-model="inputText"  rows="9"></textarea>
    <button  class="checkButton"  @click="checkSimilarity">查重</button>
    <div  class="resultContainer">
      <h3>查重结果：</h3>
      <div  class="resultBox"  v-if="similarityResult">
        <p  v-for="(result,  index)  in  similarityResult"  :key="index">{{  index+1  }}.&emsp;{{  result  }}</p>
      </div>
    </div>
  </div>
</template>
<style  scoped>
.container  {
  width:  80%;
  margin:  auto;
}

.inputBox  {
  width:  100%;
  margin:  10px  0;
  padding:  10px;
  font-size:  16px;
  border:  1px  solid  #ccc;
  border-radius:  5px;
}

.checkButton  {
  background-color:  #3e8e41;
  color:  white;
  padding:  10px  20px;
  border:  none;
  border-radius:  5px;
  font-size:  16px;
  cursor:  pointer;
}

.resultContainer  {
  margin-top:  20px;
}

.resultBox  {
  padding:  10px;
  font-size:  16px;
  border:  1px  solid  #ccc;
  border-radius:  5px;
}

.resultBox  p  {
  margin:  0;
  line-height:  1.5;
}
</style>

<script>
import axios from 'axios';
import Vue from "vue";
Vue.prototype.$axios = axios;
export default {
  data() {
    return {
      inputText: '',
      similarityResult:  null,
      results: [],
    };
  },
  methods: {
    checkSimilarity () {
      let data = this.inputText.split('\n')
      axios.post('http://localhost:5000/similarity', {
        data: data
      })
          .then(response => {
            this.similarityResult  =  response.data.result
          })
          .catch(error => {
            console.log(error)
          })
    }
  }
}
</script>



<!--&lt;!&ndash;<template>&ndash;&gt;-->
<!--&lt;!&ndash;  <div>&ndash;&gt;-->
<!--&lt;!&ndash;    <button @click="getDuplicateNumber()">点击进行作业查重</button>&ndash;&gt;-->
<!--&lt;!&ndash;    <p>Duplicate Number: {{ similarityScore }}</p>&ndash;&gt;-->
<!--&lt;!&ndash;  </div>&ndash;&gt;-->

<!--&lt;!&ndash;</template>&ndash;&gt;-->

<!--&lt;!&ndash;<script>&ndash;&gt;-->

<!--&lt;!&ndash;import axios from 'axios';&ndash;&gt;-->
<!--&lt;!&ndash;import {data} from "browserslist";&ndash;&gt;-->
<!--&lt;!&ndash;export default {&ndash;&gt;-->
<!--&lt;!&ndash;  name: "CalculateDoc2Vec",&ndash;&gt;-->
<!--&lt;!&ndash;  data() {&ndash;&gt;-->
<!--&lt;!&ndash;    return {&ndash;&gt;-->
<!--&lt;!&ndash;      similarityScore: 0.0&ndash;&gt;-->
<!--&lt;!&ndash;    }&ndash;&gt;-->
<!--&lt;!&ndash;  },&ndash;&gt;-->

<!--&lt;!&ndash;  mounted() {&ndash;&gt;-->
<!--&lt;!&ndash;    this.axios({&ndash;&gt;-->
<!--&lt;!&ndash;      method:"get",&ndash;&gt;-->
<!--&lt;!&ndash;      url:"/doc2vecRequest",&ndash;&gt;-->
<!--&lt;!&ndash;      data: {&ndash;&gt;-->
<!--&lt;!&ndash;        similarityScore: 0.0&ndash;&gt;-->
<!--&lt;!&ndash;      }&ndash;&gt;-->
<!--&lt;!&ndash;    }).then((response)=>{&ndash;&gt;-->
<!--&lt;!&ndash;      this.similarityScore = response.data.list;&ndash;&gt;-->
<!--&lt;!&ndash;      console.log("eeeeeeeeeeeeeeee")&ndash;&gt;-->
<!--&lt;!&ndash;    })&ndash;&gt;-->
<!--&lt;!&ndash;  },&ndash;&gt;-->

<!--&lt;!&ndash;  methods: {&ndash;&gt;-->
<!--&lt;!&ndash;    getDuplicateNumber (){&ndash;&gt;-->
<!--&lt;!&ndash;      this.request.get("/doc2vecRequest/", {&ndash;&gt;-->
<!--&lt;!&ndash;          // similarityScore: this.similarityScore&ndash;&gt;-->
<!--&lt;!&ndash;      }).then(response => {&ndash;&gt;-->
<!--&lt;!&ndash;        console.log("即将进入计算")&ndash;&gt;-->
<!--&lt;!&ndash;        this.similarityScore = response.data.similarityScore;&ndash;&gt;-->
<!--&lt;!&ndash;        console.log(response.data.similarityScore)&ndash;&gt;-->
<!--&lt;!&ndash;      })&ndash;&gt;-->
<!--&lt;!&ndash;      // let self = this;&ndash;&gt;-->
<!--&lt;!&ndash;      // axios.get('/doc2vecRequest')D&ndash;&gt;-->
<!--&lt;!&ndash;      //     .then(function (response) {&ndash;&gt;-->
<!--&lt;!&ndash;      //       self.duplicateNumber = response.data;&ndash;&gt;-->
<!--&lt;!&ndash;      //     })&ndash;&gt;-->
<!--&lt;!&ndash;      //     .catch(function (error) {&ndash;&gt;-->
<!--&lt;!&ndash;      //       console.log(error);&ndash;&gt;-->
<!--&lt;!&ndash;      //     });&ndash;&gt;-->
<!--&lt;!&ndash;    }&ndash;&gt;-->
<!--&lt;!&ndash;  }&ndash;&gt;-->
<!--&lt;!&ndash;}&ndash;&gt;-->
<!--&lt;!&ndash;</script>&ndash;&gt;-->

<!--<template>-->
<!--   <div>-->
<!--   <h1>查重系统</h1>-->
<!--   <textarea v-model="inputText"></textarea>-->
<!--   <button @click="checkDuplicate">查重</button>-->
<!--   <table>-->
<!--   <thead>-->
<!-- <tr>-->
<!--   <th>文档1</th>-->
<!--   <th>文档2</th>-->
<!--   <th>相似度</th>-->
<!--   </tr>-->
<!-- </thead>-->
<!--   <tbody>-->
<!-- <tr v-for="(result, index) in results" :key="index">-->
<!-- <td>{{ result[0] }}</td>-->
<!-- <td>{{ result[1] }}</td>-->
<!-- <td>{{ result[2] }}</td>-->
<!-- </tr>-->
<!-- </tbody>-->
<!--   </table>-->
<!--   </div>-->
<!--</template>-->

<!--<script>-->
<!--import axios from 'axios';-->

<!--export default {-->
<!--  data() {-->
<!--    return {-->
<!--      inputText: '',-->
<!--      threshold: 0.7,-->
<!--      results: [],-->
<!--    };-->
<!--  },-->
<!--  methods: {-->
<!--    checkDuplicate() {-->
<!--      // 发起 AJAX 请求-->
<!--      axios.post('/check_duplicate', {-->
<!--        data: this.inputText.split(''),-->
<!--        threshold: this.threshold,-->
<!--      })-->
<!--          .then(response => {-->
<!--            // 更新查重结果-->
<!--            this.results = response.data;-->
<!--          })-->
<!--          .catch(error => {-->
<!--            console.log(error);-->
<!--          });-->
<!--    },-->
<!--  },-->
<!--};-->
<!--</script>-->
